<template>
	<!--教师详情描述页-->
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view class="main-section top">
			<view class="base-info">
				<view class="cover">
					<image :src="data.cover_200" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="title">
						{{data.name}}
					</view>
					<view class="description text-ellipsis-2">
						{{data.description}}
					</view>
				</view>
			</view>
			
			<view class="content">
				<rich-text :nodes="data.content"></rich-text>
			</view>
			<template v-if="config">
				<CopyRight :data="config.copyright" />
			</template>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import CopyRight from '@/common/components/copyright.vue' //自定义版权
	export default {
		
		components: {
			CopyRight
		},
		data() {
			return {
				loading: true, // 数据是否加载完成
				urlParams: {},
				data: {},
				nodes: [{
					name: 'div',
					attrs: {
						class: 'div-class',
						style: 'line-height: 60px; color: red; text-align:center;'
					},
					children: [{
						type: 'text',
						text: 'Hello&nbsp;uni-app!'
					}]
				}],
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    await this.$onLaunched;
			this.urlParams = option
			console.log(this.urlParams)
			this.getData()
		},
		created() {
			
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			/**
			 * 获取详情数据
			 */
			getData: function(){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'detail'
					data.m = 'muu_classroom'
					data.id = params.id
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/teacher'
					//#endif
					//#ifdef H5
					url = 'entry/site/teacher'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.data = res.data.data
							// 加载完成
							that.loading = false
						}
					}
				})
			},
		},
		onReachBottom() {
			console.log('页面滚动到底部')
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	
	.base-info {
		display: flex;
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.cover {
			position: relative;
			width: 160rpx;
			image {
				width: 100%;
				display: block;
			}
		}
		.info {
			flex: 1;
			position: relative;
			padding: 0 20rpx;
			.title {
				font-size: 36rpx;
				font-weight: 600;
				color: #000;
				line-height: 64rpx;
			}
			.description {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	.content {
		background-color: #fff;
		padding: 20rpx;
	}

</style>

